import { Card, Cascader, Empty, Flex, message, Modal, Spin, Tag } from "antd";
import { FC, useEffect, useState } from "react";
import { connect } from "umi";
import logoImg from "@/assets/imgs/logo.png";
import styles from "./styles.less";
import { CheckCard } from "@ant-design/pro-components";
import Https2 from "@/utils/Https2";
import { removeItem, setItem } from "@/utils/localstorage";
import { CloseCircleFilled } from "@ant-design/icons";
import Https from "@/utils/Https";
import { getBtnAccess } from "@/utils/common";
const SelectVenue: FC<any> = (props) => {
  const btnAccess = getBtnAccess();
  console.log(btnAccess, "_btnAccess");
  const { brandInfo, dispatch } = props;
  const [regionList, setRegionList] = useState([]);
  const [venue, setVenue] = useState([]);
  const [loading, setLoading] = useState(false);
  const getRegion = async () => {
    let res = await Https2.get("/venue/info/venueRegionList", {}, true);
    if (res.code == 200) {
      setRegionList(res.data);
    } else {
      setRegionList([]);
    }
  };
  const getVenueList = async (address) => {
    setLoading(true);
    let res = await Https2.get(
      "/venue/info/switchVenueList",
      { address },
      true
    );
    console.log(res);
    if (res.code == 200) {
      setVenue(res.data);
    } else {
      message.error(res.msg);
      setVenue([]);
    }
    setLoading(false);
  };
  //进入场馆
  const goVenueDetails = async (item) => {
    let res = await Https.get("/venue/info/validatedPeriod", {}, true);
    if (res.code == 200) {
      await Https.get("/venue/info/changeVenue", { id: item.id });
      setItem("venueInfo", item);
      window.location.replace("/welcome");
    } else {
      Modal.info({
        title: (
          <div>
            <CloseCircleFilled
              style={{
                color: "red",
                fontSize: "18px",
                marginRight: "5px",
              }}
            />
            提示
          </div>
        ),
        icon: null,
        content: "套餐已过期, 请先续费或者升级再进入场馆",
        onOk() {},
      });
    }
  };
  useEffect(() => {
    dispatch({
      type: "global/queryHiddenLeftMenu",
      params: {
        status: true,
      },
    });
    getVenueList("");
    getRegion();
    console.log(window.location.pathname);
    return () => {
      dispatch({
        type: "global/queryHiddenLeftMenu",
        params: {
          status: false,
        },
      });
    };
  }, []);
  return (
    <Spin spinning={loading}>
      <div className={styles.SelectVenue}>
        <Card
          title="品牌信息"
          extra={
            btnAccess.includes("canBrand") && (
              <a
                onClick={() => {
                  removeItem("venueInfo");
                  window.location.replace("/welcome");
                }}
              >
                品牌管理
              </a>
            )
          }
        >
          <Flex justify="flex-start" align="center" gap={24}>
            <img
              className={styles.logoImg}
              src={brandInfo.brandLogoUrl || logoImg}
              alt=""
            />
            <div className={styles.brandName}>{brandInfo.brandName}</div>
          </Flex>
        </Card>
        <Card title="选择任一场馆进入">
          <Cascader
            options={regionList}
            onChange={(e) => {
              if (e) {
                let address = e.join("-");
                getVenueList(address);
              } else {
                getVenueList("");
              }
            }}
            fieldNames={{
              label: "name",
              value: "name",
            }}
            style={{ width: "300px" }}
            placeholder="请选择"
          />
          <div className={styles.venueList}>
            {venue && venue.length > 0 ? (
              venue.map((item) => (
                <div className={styles.checkBox}>
                  <CheckCard
                    title={item.venueName}
                    key={item.id}
                    checked={false}
                    description={
                      <span title={item.venueAddress}>{item.venueAddress}</span>
                    }
                    onClick={() => {
                      goVenueDetails(item);
                    }}
                  />
                  {item.isLastVenue == 1 && (
                    <div className={styles.againLogin}>上次登录</div>
                  )}
                </div>
              ))
            ) : (
              <Empty></Empty>
            )}
          </div>
        </Card>
      </div>
    </Spin>
  );
};
export default connect(({ global }) => ({
  ...global,
}))(SelectVenue);
